<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.bootcss.com/hover.css/2.1.1/css/hover-min.css" rel="stylesheet">

    <link rel="stylesheet" href="../static/css/base/reset.css">


    <link rel="stylesheet" href="../static/css/base/base.css">


    <link rel="stylesheet" href="../static/css/base/widget.css">

    <link rel="stylesheet" href="cloudDesktop.css">

    <style>


        .mapContainer {
            width: 100%;
            height: 100%;
            background-color: #0d8ddb;
        }

        .left_silde {
            width: 60px;
            height: 100%;
            background-color: #2F3347;
            position: absolute;
            top: 0;
            opacity: 0.8;
            z-index: 888;
        }

        .right_silde {
            width: 360px;
            height: 100%;
            background-color: white;
            position: absolute;
            top: 0;
            left: calc(100% - 360px);
            opacity: 0.8;
        }

        .left_silde_for_toggle {
            width: 60px;
            height: 100%;
            background-color: transparent;
            position: absolute;
            top: 0;
            opacity: 0.8;
            z-index: 890;
        }

    </style>

</head>
<body>


<div class="mapContainer client_h">
    <div class="left_silde"></div>
    <div class="left_silde_for_toggle"></div>

    <!--百度地图容器-->
    <div class="map_main client_h" id="map">

    </div>
    <div class="right_silde"></div>
</div>

<script>


</script>

<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script src="../static/js/beyond.js"></script>

<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

<script>
    //监听窗口事件 开始
    $(window).bind("load resize", function () {
        var outerWidth = $(window).width();
        var outerHeight = $(window).height();

        $(".client_h").css({
            height: outerHeight + 'px'
        });
    });

    $(".left_silde_for_toggle").mouseout(function () {
        $(".left_silde").animate({
            left: '-60px'
        });
    }).mouseenter(function () {
        $(".left_silde").animate({
            left: 0
        });
    });

</script>

<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
        addMapOverlay(); //向地图添加覆盖物
    }

    function createMap() {
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(126.647611, 45.726452), 16);
    }

    function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }

    function addClickHandler(target, window) {
        target.addEventListener("click", function () {
            target.openInfoWindow(window);
        });
    }

    function addMapOverlay() {
        var markers = [{
            content: "我的备注",
            title: "我的标记",
            imageOffset: {
                width: 0,
                height: 3
            },
            position: {
                lat: 45.725295,
                lng: 126.64815
            }
        }];
        for (var index = 0; index < markers.length; index++) {
            var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
            var marker = new BMap.Marker(point, {
                icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                    imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                })
            });
            var label = new BMap.Label(markers[index].title, {
                offset: new BMap.Size(25, 5)
            });
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
            marker.setLabel(label);
            addClickHandler(marker, infoWindow);
            map.addOverlay(marker);
        }
        ;
    }
    //向地图添加控件
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: true
        });
        map.addControl(overviewControl);
    }
    var map;
    initMap();
</script>

</body>
</html>